import { PlusOutlined } from '@ant-design/icons';
import { Button, Modal, Upload } from 'antd';
import React, { useState } from 'react';
import logo from "../assets/tuzhang.png"
import { fabric } from "fabric";

const getBase64 = (file) =>
  new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);

    reader.onload = () => resolve(reader.result);

    reader.onerror = (error) => reject(error);
  });

const Upload1 = (props) => {
  const [previewOpen, setPreviewOpen] = useState(false);
  const [previewImage, setPreviewImage] = useState('');
  const [previewTitle, setPreviewTitle] = useState('');
  const [fileList, setFileList] = useState([
    {
      uid: '-1',
      name: 'image.png',
      status: 'done',
      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    },
    {
      uid: '-2',
      name: 'image.png',
      status: 'done',
      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    },
    {
      uid: '-3',
      name: 'image.png',
      status: 'done',
      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    },
  
  ]);

  const handleCancel = () => setPreviewOpen(false);
  const qianzhang=()=>{console.log("qianzhang")}
  const handlePreview = async (file) => {
    if (!file.url && !file.preview) {
      file.preview = await getBase64(file.originFileObj);
    }

    setPreviewImage(file.url || file.preview);
    console.log(file.url)
    props.addSignature(file.url)
    setPreviewOpen(true);
    qianzhang()
    setPreviewTitle(file.name || file.url.substring(file.url.lastIndexOf('/') + 1));
  };



  const handleChange = ({ fileList: newFileList }) => {
    console.log(newFileList)
    setFileList(newFileList);
  }
  const beforeUpload=()=>{
    console.log("shangchaunqian")
  }

  const uploadButton = (
    <div>
      <PlusOutlined />
      <div
        style={{
          marginTop: 8,
        }}
      >
        Upload
      </div>
    </div>
  );
  return (
    <>
      <Upload
        // action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
        action="api/upload"
        listType="picture-card"
        fileList={fileList}
        onPreview={handlePreview}
        onChange={handleChange}
        beforeUpload={beforeUpload}
      
      >
        {fileList.length >= 4 ? null : uploadButton}
      </Upload>
    
      <Modal  title={previewTitle} footer={null} onCancel={handleCancel}>
    
        <img
          alt="example"
          style={{
            width: '100%',
          }}
          src={previewImage}
          onClick={()=>{console.log("gaizhang")}}
         
        /> 
        
      </Modal>
    </>
  );
};

export default Upload1;